<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="menuCurrent" :values="menuContents" @clickItem="onClickItem"
				styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item, index) in pets" :key="item._id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{ item.content }}</view>
				<view class="author">—— {{ item.author }}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>

		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	const pets = ref([]);
	const getPets = () => {
		uni
			.request({
				url: "https://kk-charging.top/xxm",
				data: {
					url: "https://tea.qingnian8.com/tools/petShow",
					data: {
						size: 3,
						type: menuItems[menuCurrent.value].key,	
					},
					method: "GET"
				},
				header: {
					"access-key": "xxm-kk-stduy",
				},
			})
			.then((res) => {
				if (res.data.errCode === 0) {
					pets.value = [...pets.value, ...res.data.data];
				} else {
					uni.showToast({
						title: res.data.errMsg,
						icon: "error",
					});
				}
			})
			.catch((err) => {
				uni.showToast({
					title: "请求错误",
					icon: "exception",
				});
			})
			.finally(() => {
				uni.stopPullDownRefresh();
			});
	};
	onLoad(() => {
		getPets();
	});
	const onPreview = (index) => {
		uni.previewImage({
			current: index,
			urls: pets.value.map((item) => item.url),
		});
	};
	onReachBottom(() => {
		getPets();
	});
	onPullDownRefresh(() => {
		menuCurrent.value = 0;
		pets.value = [];
		getPets();
	});
	const onRefresh = () => {
		uni.startPullDownRefresh();
	};
	const onTop = () => {
		uni.pageScrollTo({
			duration: 100,
			scrollTop: 0,
		});
	};
	const menuItems = [{
			key: "all",
			value: "全部",
		},
		{
			key: "cat",
			value: "猫咪",
		},
		{
			key: "dog",
			value: "狗狗",
		},
	];
	const menuContents = computed(() => menuItems.map((item) => item.value));
	const menuCurrent = ref(0);
	const onClickItem = (e) => {
		menuCurrent.value = e.currentIndex;
		pets.value = [];
		getPets();
	};
</script>

<style lang="scss" scoped>
	.container {
		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
				border-radius: 15rpx;
				overflow: hidden;

				.pic {
					image {
						width: 100%;
					}
				}

				.text {
					padding: 30rpx;
					color: #333;
					font-size: 16px;
				}

				.author {
					padding: 0 30rpx 30rpx;
					float: right;
					color: #888;
					font-size: 14px;
				}
			}
		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 0rpx;
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}

		.loadMore {
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}

		.menu {
			padding: 30rpx 50rpx 0 50rpx;
		}
	}
</style>